<template>
    <div>
        <!--  面包屑  -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--  卡片  -->
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <!--   搜索添加   -->
                    <el-input clearable
                              @clear="seyGoogsList"
                              v-model="queryInfo.query"
                              placeholder="请输入内容"
                              class="input-with-select">
                        <el-button slot="append"
                                   @click="seyGoogsList"
                                   icon="el-icon-search">
                        </el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button
                            @click="btnToAddGoogs"
                            type="primary">添加商品</el-button>
                </el-col>
            </el-row>
            <!--      列表区域      -->
            <el-table
                    border
                    stripe
                    :data="setGoogsListData"
                    style="width: 100%">
                <el-table-column
                        label="#"
                        align="center"
                        type="index">
                </el-table-column>
                <el-table-column
                        prop="goods_name"
                        align="center"
                        label="商品名称">
                </el-table-column>
                <el-table-column
                        prop="goods_price"
                        align="center"
                        width="85px"
                        label="价格(元)">
                </el-table-column>
                <el-table-column
                        prop="goods_weight"
                        align="center"
                        width="65px"
                        label="重量">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="180px"
                        label="创建时间">
                    <template slot-scope="scope">
                        {{scope.row.add_time | dataFromTime}}
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        width="130px"
                        label="操作">
                    <template slot-scope="scope">
                        <!--      修改      -->
                        <el-button type="primary"
                                   icon="el-icon-edit"
                                   size="small"></el-button>
                        <!--      删除      -->
                        <el-button type="danger"
                                   @click="delGoogs(scope.row.goods_id)"
                                   icon="el-icon-delete"
                                   size="small"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--     分页       -->
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
  export default {
    name: "List",
    data() {
      return {
        // 列表请求参数
        queryInfo: {
          query: '',
          pagenum: 1,
          pagesize: 10
        },
        // 列表数据源
        setGoogsListData: [],
        // 总数据条数
        total: 0
      }
    },
    mounted() {
      this.seyGoogsList()
    },
    methods: {
      // 商品列表
      seyGoogsList() {
        this.$http.get('goods', {
          params: this.queryInfo
        }).then(res => {
          if (res.data.meta.status !== 200) {
            return this.$message.error(res.data.meta.msg)
          }
          this.setGoogsListData = res.data.data.goods
          this.total = res.data.data.total
        })
      },
      // 最新页码数
      handleSizeChange(newSize) {
        this.queryInfo.pagesize = newSize
        this.seyGoogsList()
      },
      // 监听页码
      handleCurrentChange(newPage) {
        console.log(newPage)
        this.queryInfo.pagenum = newPage
        this.seyGoogsList()
      },
      // 删除
      delGoogs(id){
        this.$alert('确定删除吗', '删除用户', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res => {
          this.$http.delete('goods/' + id).then(res => {
            if (res.data.meta.status !== 200) {
              return this.$message.error(res.data.meta.msg)
            }
            this.$message.success(res.data.meta.msg)
            this.seyGoogsList()
          })
        }).catch(err => err)
      },
      // 添加商品
      btnToAddGoogs(){
        this.$router.push('/goods/add')
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
